<template>
  <van-tabbar v-model="active">
    <van-tabbar-item icon="home-o" to="/cqust/index">首页</van-tabbar-item>
    <van-tabbar-item icon="phone-o" to="/cqust/jsjl">教师交流</van-tabbar-item>
    <van-tabbar-item icon="star-o" to="/cqust/yrcg">育人成果</van-tabbar-item>
    <van-tabbar-item icon="setting-o" to="/cqust/userinfo">个人中心</van-tabbar-item>
  </van-tabbar>
</template>

<script setup>
import { watch, ref } from 'vue';
import { useRoute } from 'vue-router';
import { useTabbarStore } from '../Store/modules/tabber';

const route = useRoute();
const tabbarStore = useTabbarStore();

// 从 store 中获取 active 状态
const active = ref(tabbarStore.active);

// 监听路由变化，更新选中状态
watch(
    () => route.path,
    (newPath) => {
      tabbarStore.setActiveByPath(newPath);
    },
    { immediate: true } // 立即执行一次，确保初始化时状态正确
);
</script>
